<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/4/24
  Time: 9:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>--%>
<html>
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/bootstrap-theme.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/style2.css" type="text/css" />

    <style type="text/css">
        .form{text-align: center;padding: 10px 0;}
    </style>
</head>
<body>

    <%--<form role="form" class="form-inline form" action="getCity">--%>
        <%--<div class="form-group">--%>

            <%--<div class="input-group">--%>
                <%--<span class="input-group-addon">年份：</span>--%>
                <%--<select class="form-control"  name="year"  id="year" style="width:100px">--%>
                    <%--<c:forEach var="var" items="${years}">--%>

                        <%--<c:choose>--%>
                            <%--<c:when test="${var == year}"><option value="${var}" selected="selected">${var}</option></c:when>--%>
                            <%--<c:otherwise><option value="${var}">${var}</option></c:otherwise>--%>
                        <%--</c:choose>--%>
                    <%--</c:forEach>--%>
                <%--</select>--%>
            <%--</div>--%>

            <%--<div class="input-group">--%>
                <%--<span class="input-group-addon">月份：</span>--%>
                <%--<select class="form-control"  name="month"  id="month" style="width:100px">--%>
                    <%--<c:forEach var="var" items="${months}">--%>
                        <%--<option value="${var}">${var}</option>--%>
                    <%--</c:forEach>--%>
                <%--</select>--%>
            <%--</div>--%>

            <%--<div class="input-group">--%>
                <%--<span class="input-group-addon">是否重复：</span>--%>
                <%--<select class="form-control"  name="provinceId"  id="Province" style="width:100px">--%>
                    <%--<option>是</option>--%>
                    <%--<option>否</option>--%>
                <%--</select>--%>
            <%--</div>--%>
            <%--<input type="submit" class="btn btn-primary" value="查询">--%>
        <%--</div>--%>
    <%--</form>--%>
    <%@ include file="title.jsp"%>
    <div id="test" style="height:600px;"></div>

    <script src="${pageContext.request.contextPath}/res/jquery-1.8.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/res/bootstrap.min.js"></script>
    <script type="text/javascript" src="res/echarts.js"></script>
    <script>
        var xAxisDataJson = [];
        var currentDataJson = [];
        var lastDataJson = [];
        var diffDataJson = [];
        var increaseDataJson = [];
        var equJson = 0;
        var incrEquJSON = 0;
        var G = {
            xAxis:'${menus}',
            currentJSON:'${currentJSON}',
            lastJSON:'${lastJSON}',
            diffJSON:'${diffJSON}',
            increaseJSON:'${increaseJSON}',
            max:'${max}',
            min:'${min}',
            incrEquJSON:'${incrEquJSON}',
            incrMaxZ:'${incrMaxZ}',
            incrMin:'${incrMin}',
            equalization:'${equalization}'
        };
        var xAData = eval("("+G.xAxis+")");
        var currentData = eval("("+G.currentJSON+")");
        var lastData = eval("("+G.lastJSON+")");
        var diffData = eval("("+G.diffJSON+")");
        var increaseData = eval("("+G.increaseJSON+")");
        var equalizationData = eval("("+G.equalization+")");
        var incrEquJSONData = eval("("+G.incrEquJSON+")");
        equJson = equalizationData[0];
        incrEquJSON = incrEquJSONData[0];
        console.log("incrEquJSON:"+incrEquJSON);
        for(var i=0;i<xAData.length;i++){
            xAxisDataJson[i] = xAData[i];
            currentDataJson[i] = currentData[i];
            lastDataJson[i] = lastData[i];
            diffDataJson[i] = diffData[i];
            increaseDataJson[i] = increaseData[i];
        }
        console.log("max:"+G.max);
        console.log("min:"+G.min);
        console.log("equalization:"+G.equalization);
        var barData = {
            xAxisData:function(){
                return xAxisDataJson;
            },
            currentData:function(){
                return currentDataJson;
            },
            lastData:function(){
                return lastDataJson;
            },
            diffData:function(){
                return diffDataJson;
            },
            increaseData:function(){
                return increaseDataJson;
            }
        };

        var myChart = echarts.init(document.getElementById('test'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data:['今年的总量','去年的总量','增量','增幅']
            },
            xAxis: [
                {
                    type: 'category',
                    axisLabel:{
                        interval:0,
                        rotate:45,
                        margin:2,
                        textStyle:{
                            color:"#222"
                        }
                    },
                    data: barData.xAxisData()
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '总量',
                    min: G.min,
                    max: G.max,
                    interval: equJson,
                    axisLabel: {
                        formatter: '{value} 万元'
                    }
                },
                {
                    type: 'value',
                    name: '增幅',
                    min: -1000,
                    max: 200,
                    interval: 200,
                    axisLabel: {
                        formatter: '{value} %'
                    }
                }
            ],
            series: [
                {
                    name:'今年的总量',
                    type:'bar',
                    data:barData.currentData()
                },
                {
                    name:'去年的总量',
                    type:'bar',
                    data:barData.lastData()
                },
                {
                    name:'增量',
                    type:'bar',
                    data:barData.diffData()
                },
                {
                    name:'增幅',
                    type:'line',
                    yAxisIndex: 1,
                    data:barData.increaseData()
                }
            ]
        };


        myChart.setOption(option);
    </script>
</body>
</html>
